<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 基础布局 -->
      <div class="insertBtn">
        <el-button  plain size="small" @click="$router.push('/questions/new')">新增试题</el-button>
        <el-button  plain size="small"  @click="getSubject()">导入试题</el-button>
        <el-dialog  title="批量导入" :visible.sync="dialogVisible" width="700px">
        <span>
          <el-form label-width="130px">
            <el-form-item label="学科：" >
              <!-- 获取学科 -->
              <el-select placeholder="请选择" v-model="reqParams.subjectID" style="width:400px" >
                <el-option v-for="item in subjectOption" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">上传</el-button>
          <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
      </div>
      <div class="tagName">
        <span>标签名称</span>
        <el-input v-model="reqParams.tagName" style="width:150px;height:20px" placeholder="请输入" size="mini"></el-input>
      </div>
      <el-table
        :data="tagsList"
        border
        style="width: 100%">
        <el-table-column prop="id" label="序号" width="50px"></el-table-column>
        <el-table-column prop="subjectName" label="标签名称" width="100px"></el-table-column>
        <el-table-column prop="creator" label="创建者" width="100px"></el-table-column>
        <el-table-column label="创建日期">
           <template slot-scope="scope">
          <span>{{scope.row.addDate | parseTimeByString}}</span>
        </template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量" width="100px"></el-table-column>
        <el-table-column  label="状态" width="80px">
          <template slot-scope="scope">
            <span :class="{start:isState}">{{scope.row.state?'开启':'屏蔽'}}</span>
          </template>
        </el-table-column>
        <el-table-column  label="操作">
          <template slot-scope="scope">
            <el-link @click="$router.push('/subjects/tags?id='+scope.row.id)">修改</el-link>
            <el-link  @click="disabledTags(scope.row)" v-if="isState" >{{'开启'}}</el-link>
            <el-link  @click="disabledTags(scope.row)" v-else >{{'屏蔽'}}</el-link>
            <el-link @click="delTag(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// 导入学科简单列表
import {simple} from '@/api/hmmm/subjects.js'
import * as tags from '@/api/hmmm/tags.js'
export default {
  name: 'TagsList',
  data() {
    return {
      dialogVisible: false,
      reqParams: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        tagName: null,
        state: 1
      },
      tagsList: [],
      isState: false,
      subjectOption: []
    }
  },
  created() {
    this.getLists()
  },
  methods: {

    // 获取学科
    async getSubject() {
      const data = await simple()
      // console.log(data.data)
      this.subjectOption = data.data
      this.dialogVisible = true

    },
    // 禁用数据
    disabledTags(row) {
      // console.log(row)
      if (row.state === 1) {
        // 修改当前条目的数据
         row.state = 0
         this.isState = true
        // 更新当前列的数据
        // this.getLists()

      } else {
        row.state = 1
        // this.reqParams.state = 1
        this.isState = false
      }
    },
    // 删除数据
    delTag(id) {
       this.$confirm('此操作将永久删除试题 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await tags.remove({ id: id })
            .then(response => {
              this.$message.success('成功删除试题' + '!')
              // this.dataList.splice(user, 1)
              this.getLists()
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 获取标签列表
    async getLists() {
      const {data: res} = await tags.list(this.reqParams)
      this.tagsList = res.items
      // console.log(res.items)

    }
  }
}
</script>

<style  lang="scss" scoped>
.dashboard-container{
  font-size: 12px;
  .tagName{
    margin:10px 0;
  }
}
.start{
  color:blue;
}
</style>
